<!-- 公共的抽屉 -->
<template>
    <!-- <div class="close-icon" @click="handleCloseDrawer" v-if="drawer">
        <el-icon><CloseBold /></el-icon>
    </div> -->
    <el-drawer
        class="public-drawer"
        :model-value="drawer"
        :title="title"
        :direction="direction"
        :show-close="showClose"
        :close-on-click-modal="closeOnClickModal"
        :append-to-body="appendToBody"
        @close="handleCloseDrawer"
    >
        <template #header v-if="!title">
            <div class="left">
                <slot name="header"></slot>
            </div>

            <img @click="handleCloseDrawer" src="@/assets/image/delete.png" alt="删除" />
        </template>

        <slot></slot>
    </el-drawer>
</template>
 
<script>
import { ref } from 'vue';
export default {
    props: {
        title: {
            type: String,
            default: () => ''
        },
        direction: {
            type: String,
            default: () => 'rtl'
        },
        showClose: {
            type: Boolean,
            default: () => true
        },
        closeOnClickModal: {
            type: Boolean,
            default: () => false
        },
        appendToBody: {
            type: Boolean,
            default: () => false
        },
        drawer: {
            type: Boolean,
            default: () => false
        }
    },
    setup(props, { emit }) {
        const handleCloseDrawer = () => {
            emit('update:drawer', false);
        };

        return {
            handleCloseDrawer
        };
    }
};
</script>
<style  lang="scss">
.public-drawer {
    width: 6.4rem !important;
    .el-drawer__header {
        font-weight: 500;
        font-size: 16px;
        color: #1d2129;
        height: 0.48rem;
        border-bottom: 0.01rem solid #e5e6eb;
        // background: red !important;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        padding: 0 0.24rem;
    }
    .el-drawer__body {
        padding: 0;
    }
}
// .close-icon {
//     position: absolute;
//     width: 0.4rem;
//     height: 0.4rem;
//     background: #165dff;
//     box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
//     border-radius: 6px 0px 0px 6px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     color: #fff;
//     right: 6.4rem;
//     top: 0.88rem;
//     z-index: 9999;
// }
</style>